<template>
	<div>
		<img :src="src" alt="" class="share-image" v-show="src">
		<vue-canvas-poster class="poster" :painting="painting" @success="success" @fail="fail" v-if="share"></vue-canvas-poster>
	</div>
</template>
<script>
	// 海报分享的组件
	// https://github.com/sunnie1992/vue_canvas_poster
	import vueCanvasPoster from './canvas-poster'
	export default {
		name: 'test',
		props: {
			share: {
				type: Boolean,
				default: false
			},
			posterlist: {
				type: Array,
				default: () => {
					 return [
						//  {
						// 	type: 'rect',
						// 	top: 0,
						// 	left: 0,
						// 	background: '#f4f5f7',
						// 	width: 550,
						// 	height: 876
						// },
						// {
						// 	type: 'image',
						// 	url: require('@/static/images/organize_team/hbt.jpg'),
						// 	left: 0,
						// 	top: 0,
						// 	width: 550,
						// 	height: 876,
						// 	radius: 40
						// },
						
						
						// {
						// 	type: 'text',
						// 	content: `店铺名:`,
						// 	fontSize: 20,
						// 	top: 660,
						// 	left: 210,
						// },
						// {
						// 	type: 'text',
						// 	content: `12121212`,
						// 	fontSize: 20,
						// 	top: 660,
						// 	left: 280,
						// },
						// {
						// 	type: 'text',
						// 	content: `联系电话:`,
						// 	fontSize: 20,
						// 	top: 700,
						// 	left: 210,
						// },
						// {
						// 	type: 'text',
						// 	content: `2222222222`,
						// 	fontSize: 20,
						// 	top: 700,
						// 	left: 300,
						// },
						// {
						// 	type: 'text',
						// 	content: `地址:`,
						// 	fontSize: 20,
						// 	top: 740,
						// 	left: 210,
						// },
						// {
						// 	type: 'text',
						// 	content: `西安市高新区科技路西口`,
						// 	color:'#999999',
						// 	fontSize: 20,
						// 	top: 740,
						// 	left: 260,
						// },
						
						// {
						// 	type: 'rect',
						// 	top: 647,
						// 	left: 439,
						// 	background: '#fff',
						// 	width: 28,
						// 	height: 28,
						// 	deg: 45
						// },
						// {
						// 	type: 'text',
						// 	content: `长按或扫描二维码`,
						// 	fontSize: 18,
						// 	color: '#999999',
						// 	top: 805,
						// 	left: 55
						// },
						
						// {
						// 	type: 'qrcode',
						// 	content: 'https://github.com/sunnie1992/vue_canvas_poster',
						// 	background: '#fff',
						// 	color: '#000',
						// 	left: 55,
						// 	top: 650,
						// 	width: 135,
						// 	height: 135
						// },
					]
				}
			}
		},
		components: {
			vueCanvasPoster
		},
		computed: {
			painting() {
				return {
					width: this.width,
					height: this.height,
					views: this.posterlist
				}
			}
		},
		data() {
			return {
				width: 550,
				height: 876,
				src: '',

			}
		},
		methods: {
			// 保存
			success(src) {
				this.src = src
				console.log(src)
				this.$emit('sharelink', this.src)
			},
			fail(err) {
				console.log('fail', err)
			}
		}
	}
</script>

<style>
	.share-image {
		width: 270px;
		height: 438px;
	}
</style>
